<template>
	<view>
		<view v-for="orderitem in order" class="order" @click="todetails(orderitem.id)">
			<view class="ordertit">
				<p class="ordername">
					{{orderitem.name}}
				</p>
				<p class="orderstatus">{{orderitem.status}}</p>
			</view>
			<view class="hr">
				<u-line color="#E4E4E4"></u-line>
				<view v-for="ordercontent in orderitem.content" class="ordercontent">
					<p>{{ordercontent.name}}</p>
					<p>x {{ordercontent.num}}</p>
				</view>
				<view class="ordercount">
					<p>共{{orderitem.num}}件商品，实付<span style="font-weight: 700;color: black;">￥{{orderitem.pay}}</span>
					</p>
					<view class="orderbtn">
						<u-button type="warning" size="small">{{buts}}</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const order = [{
		id: '1',
		name: '孙氏烤鸭',
		content: [{
			name: '手撕烤鸭整只（下单送优酸乳）',
			num: '1',
			price: '29.9',
		}, {
			name: '米饭',
			num: '1',
			price: '2',
		}],
		status: '已完成',
		pay: '31.9',
		num: '2'
	}, {
		id: '2',
		name: '扬州炒饭',
		content: [{
			name: '蛋炒饭',
			num: '1',
			price: '16'
		}],
		status: '配送中',
		pay: '16',
		num: '1'
	}]

	const props = defineProps({
		buts: "buts"
	})
	
	const todetails = (id)=>{
		uni.navigateTo({
			url: '/SubPages/orderDetails/orderDetails?id=' + id
		})
	}
</script>

<style>
	.order {
		margin: 0 auto;
		margin-top: 10px;
		width: 90%;
		background-color: white;
		border-radius: 5px;
		overflow: hidden;
		padding: 10px;
	}

	.ordertit {
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
	}

	.orderstatus {
		color: #5F5F5F;
		font-size: 14px;
	}

	.hr {
		margin-top: 20rpx;
	}

	.ordername {
		font-size: 17px;
		font-weight: 700;
	}

	.ordercontent {
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
		margin-top: 5px;
		font-size: 13px;
		color: #767676;
	}

	.ordercount {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		color: #5F5F5F;
		font-size: 12px;
		padding: 0 20px;
		margin-top: 5px;
	}

	.orderbtn {
		margin-top: 10px;
	}
</style>